<template>
  <div class="detail-tab2">
    <div class="table-content">
      <div class="item">
        <div class="title">关键财务指标表</div>
        <el-table :data="transData1" class="tableBoxChild">
          <el-table-column
            v-for="(item, index) in transTitle1"
            :label="item"
            :key="index"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="item">
        <div class="title">未偿债券余额表</div>
        <el-table
          :data="tableData2"
          class="tableBoxChild"
          :span-method="objectSpanMethod"
        >
          <el-table-column label="期限" align="center">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column label="1年以内" align="center">
            <template slot-scope="scope">
              {{ scope.row[`c${scope.$index + 1}`] }}
            </template>
          </el-table-column>
          <el-table-column label="1-3年" align="center">
            <template slot-scope="scope">
              {{ scope.row[`d${scope.$index + 1}`] }}
            </template>
          </el-table-column>
          <el-table-column label="3-5年" align="center">
            <template slot-scope="scope">
              {{ scope.row[`e${scope.$index + 1}`] }}
            </template>
          </el-table-column>
          <el-table-column label="5年以上" align="center">
            <template slot-scope="scope">
              {{ scope.row[`f${scope.$index + 1}`] }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="未尝余额总计(亿元)" align="center"> -->
          <el-table-column label="总计(亿元)" align="center">
            <template slot-scope="scope">
              {{ scope.row[`g${scope.$index + 1}`] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table-content">
      <div class="item">
        <div class="title">高管职位表</div>
        <el-table :data="tableData3" class="tableBoxChild">
          <el-table-column
            prop="seniorExecutiveName"
            label="姓名"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="position" label="职务" align="center">
          </el-table-column>
          <el-table-column
            prop="startingDate"
            label="任职起始日"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="educationalBackground"
            label="学历"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="nationality" label="国籍" align="center">
          </el-table-column>
          <el-table-column prop="dateOfBirth" label="出身年月日" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="item">
        <div class="title">舆情信息表</div>
        <el-table :data="tableData4" class="tableBoxChild">
          <el-table-column prop="eventTitle" label="标题" align="center">
          </el-table-column>
          <el-table-column prop="eventSource" label="来源" align="center">
          </el-table-column>
          <el-table-column prop="eventTime" label="日期" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  FinancialIndicator,
  ExecutivePositions,
  OutstandingBalance,
  PublicOpinionInformation,
} from "@/api/customerManagement/issuerManagement/issuer.js";

export default {
  name: "DetailTab2",
  props: {
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      transTitle1: [],
      transData1: [],
      tableData2: [
        {
          title: "未偿余额（亿元）",
          c1: "",
          d1: "",
          e1: "",
          f1: "",
        },
        {
          title: "债券支数",
          c2: "",
          d2: "",
          e2: "",
          f2: "",
        },
        // {
        //   title: "总计",
        //   c3: "",
        //   d3: "",
        //   e3: "",
        //   f3: "",
        // },
      ],
      tableData3: [],
      tableData4: [],
    };
  },
  mounted() {},
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const params = {
        customerId: this.rowData.customerId,
      };
      const originData1 = await FinancialIndicator(params);
      const data = originData1.data || [];
      const originTitle1 = [
        "资产负债比率(%)",
        "流动性：现金比率(%)",
        "盈利能力：净利率(%)",
        "经营能力：存货周转率",
      ];
      const cloumns1 = [
        "assetDebitRate",
        "assetTotAmt",
        "netProfit",
        "depLoanRate",
      ];
      this.formatterData(data, originTitle1, cloumns1, "1", "日期", "reportDt");

      const data2 = await OutstandingBalance(params);
      const originData2 = data2.data || {};
      this.tableData2 = [
        {
          title: "未偿余额（亿元）",
          c1: originData2.oneYear.outstandingBalance,
          d1: originData2.oneToThreeYear.outstandingBalance,
          e1: originData2.fiveToMoreYear.outstandingBalance,
          f1: originData2.threeToFiveYear.outstandingBalance,
          g1: originData2.numberOfBondsTotal,
        },
        {
          title: "债券支数",
          c2: originData2.oneYear.numberOfBonds,
          d2: originData2.oneToThreeYear.numberOfBonds,
          e2: originData2.fiveToMoreYear.numberOfBonds,
          f2: originData2.threeToFiveYear.numberOfBonds,
          g2: originData2.outstandingBalanceTotal,
        },
        // {
        //   title: "总计",
        //   c3: originData2.total,
        //   d3: "",
        //   e3: "",
        //   f3: "",
        // },
      ];

      const data3 = await ExecutivePositions(params);
      this.tableData3 = data3.data || [];

      const data4 = await PublicOpinionInformation(params);
      this.tableData4 = data4.data || [];
    },
    // el-table行列转换
    formatterData(data, originTitle, cloumns, index, firstTitle, firstProp) {
      this[`transTitle${index}`] = [firstTitle];
      const formaterData = [];
      data.forEach((element) => {
        this[`transTitle${index}`].push(element[firstProp]);
        const obj = {};
        cloumns.forEach((cItem) => {
          obj[cItem] = element[cItem];
        });
        formaterData.push(obj);
      });
      // 数组按矩阵思路, 变成转置矩阵
      let matrixData = formaterData.map((row, i) => {
        let arr = [];
        for (let key in row) {
          arr.push(row[key]);
        }
        return arr;
      });
      // 加入标题拼接最终的数据
      this[`transData${index}`] = matrixData[0].map((col, i) => {
        return [
          originTitle[i],
          ...matrixData.map((row) => {
            return row[i];
          }),
        ];
      });
    },
    // 单元格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const spanDynamicGap = { merge: [1], hide: [3] }; // 需要合并或隐藏的单元格
      if (rowIndex === 2) {
        const mergeArr = spanDynamicGap.merge;
        const hideArr = spanDynamicGap.hide;
        if (mergeArr && mergeArr.indexOf(columnIndex) > -1) {
          return {
            rowspan: 1,
            colspan: 3,
          };
        }
        if (hideArr && hideArr.indexOf(columnIndex) > -1) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-tab2 {
  .table-content {
    display: flex;
    color: #ffffff;
    .item {
      padding: 20px;
      flex: 1;
      .title {
        font-size: 16px;
        padding-bottom: 20px;
      }
    }
  }
}
</style>
